<template>
    <a-layout id="components-layout-demo-top" class="layout">
        <a-layout-header>
            <div class="logo" />
            <a-menu
                    theme="dark"
                    mode="horizontal"
                    :defaultSelectedKeys="['2']"
                    :style="{ lineHeight: '64px' }"
            >
                <a-menu-item key="1" @click="navClick('1')">正在上传</a-menu-item>
                <a-menu-item key="2" @click="navClick('2')">文件上传</a-menu-item>
            </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
            <a-breadcrumb style="margin: 16px 0">
                <a-breadcrumb-item>Home</a-breadcrumb-item>
                <a-breadcrumb-item>List</a-breadcrumb-item>
                <a-breadcrumb-item>App</a-breadcrumb-item>
            </a-breadcrumb>
            <div>
                <div :style="{ background: '#fff', padding: '24px', minHeight: '280px', display: 'none' }" id="1" name="dis"><Task/></div>
                <div :style="{ background: '#fff', padding: '24px', minHeight: '280px',display: 'block'}" id="2" name="dis"><AUpload/></div>
            </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
            Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
</template>
<script>
    import AUpload from "@/components/AUpload";
    import Task from "@/components/Task";

    export default {
        data(){
            return {

            }
        },
        components:{
            AUpload,
            Task
        },
        methods:{
            navClick(number){
                const list = document.getElementsByName('dis');
                for(let i = 0;i < list.length;i++){
                    if(number === list[i].id){
                        list[i].style.display = 'block'
                    }else{
                        list[i].style.display = 'none'
                    }
                }
            }
        }
    }

</script>
<style>
    #components-layout-demo-top .logo {
        width: 120px;
        height: 31px;
        background: rgba(255,255,255,.2);
        margin: 16px 24px 16px 0;
        float: left;
    }
</style>

